<template>
	<view class="container">
		<block v-if="isload">
			<scroll-view class="message-list" scroll-y="true">
				<block v-for="(item, index) in datalist" :key="index">
					<view class="message-time" v-if="item.formatTime">{{item.formatTime}}</view>
					<view class="message-item" v-if="item.isreply==1">
						<image class="message-avatar" mode="aspectFill" :src="item.uheadimg"></image>
						<view class="message-text-left">
							<view class="arrow-box arrow-left">
								<image class="arrow-icon" src="https://test.jhwl.site/static/img/arrow-white.png">
								</image>
							</view>
							<view class="message-text">
								<parse :content="item.content" />
							</view>
						</view>
					</view>
					<view class="message-item" style="justify-content:flex-end" v-else>
						<view class="message-text-right">
							<view class="arrow-box arrow-right">
								<image class="arrow-icon" src="https://test.jhwl.site/static/img/arrow-green.png">
								</image>
							</view>
							<view class="message-text">
								<parse :content="item.content" />
							</view>
						</view>
						<image class="message-avatar" mode="aspectFill" :src="item.headimg"></image>
					</view>
				</block>
			</scroll-view>
			<view class="input-box" id="input-box">
				<view class="input-form">
					<image @tap="sendimg" class="pic-icon" src="https://test.jhwl.site/static/img/msg-pic.png"></image>
					<input @confirm="sendMessage" @focus="onInputFocus" @input="messageChange" class="input"
						:confirmHold="true" confirmType="send" cursor-spacing="20" type="text" :value="message"
						maxlength="-1" />
					<image @tap="toggleFaceBox" class="face-icon" src="https://test.jhwl.site/static/img/face-icon.png">
					</image>
					<!-- <button class="send-button" v-if="!trimMessage" :style="{background:t('color1')}">发送</button> -->
					<button @tap="sendMessage" class="send-button-active" v-if="trimMessage"
						:style="{background:t('color1')}">
						发送
					</button>
				</view>
				<!-- <view>{{sss}}</view> -->
				<wxface v-if="faceshow" @selectface="selectface"></wxface>
			</view>
			<view :class="'anit ' + (msgtipsShow == 1?'show':(msgtipsShow == 2?'hide':''))" @tap="goto"
				:data-url="'index?bid='+msgtips.bid">{{msgtips.unickname}}：{{msgtips.content}}</view>
		</block>
		<loading v-if="loading"></loading>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>
<script>
	var app = getApp();
	var interval0;
	var interval1;
	var interval2;


	export default {
		data() {
			return {
				opt: {},
				isload: false,
				loading: false,

				msgtipsShow: 0,
				msgtips: {},
				bid: 0,
				token: '',
				nowtime: '',
				pagenum: 1,
				datalist: [],
				message: "",
				trimMessage: "",
				faceshow: false,
				nomore: false,
				sss: 0,
			};
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.bid = this.opt.bid || 0;
			this.getdata();
		},

		onUnload: function() {
			clearInterval(interval0);
		},
		methods: {
			getdata: function() {
				var that = this;
				that.loading = true;
				that.loading = true;
				app.get('ApiKefu/index', {}, function(res) {
					that.loading = false;
					that.loading = false;
					that.token = res.token;
					that.getdatalist();
					that.nowtime = res.nowtime;
					that.loaded();
					interval0 = setInterval(function() {
						that.nowtime++;
					}, 1000);
				});
			},
			updateMessageTime: function() {
				var that = this;
				var datalist = this.datalist;
				for (var i in datalist) {
					var thistime = parseInt(datalist[i].createtime);
					var prevtime = 0;
					if (i > 0) {
						prevtime = parseInt(datalist[i - 1].createtime);
					}
					if (thistime - prevtime > 600) {
						datalist[i].formatTime = that.getTime(thistime);
					} else {
						datalist[i].formatTime = '';
					}
				}
				this.datalist = datalist;
			},
			getdatalist: function() {
				var that = this;
				if (that.loading) return;
				that.loading = true;
				app.post('ApiKefu/getmessagelist', {
					bid: that.bid,
					pagenum: that.pagenum
				}, function(res) {
					that.loading = false;
					var datalist = res.data;
					if (datalist.length > 0) {
						for (var i in datalist) {
							datalist[i].content = that.transformMsgHtml(datalist[i].msgtype, datalist[i]
								.content);
						}
						that.datalist = datalist.concat(that.datalist);
						that.updateMessageTime();
						if (that.pagenum == 1) {
							that.scrollToBottom();
						} else {

						}
						that.pagenum = that.pagenum + 1;
					} else {
						that.nomore = true;
					}
				});
			},
			sendMessage: function(e) {
				var that = this;
				var message = this.message;
				if (message.length > 2000) {
					uni.showToast({
						title: "单条消息不能超过2000字",
						icon: "none",
						duration: 1000
					});
				} else {
					if (message.replace(/^\s*|\s*$/g, "")) {
						var msgdata = {
							aid: app.globalData.aid,
							mid: app.globalData.mid,
							bid: that.bid,
							msgtype: 'text',
							content: message,
							platform: app.globalData.platform,
							pre_url: app.globalData.pre_url
						};
						console.log(msgdata)
						app.sendSocketMessage({
							type: 'tokefu',
							data: msgdata
						});
						that.message = "";
						that.trimMessage = "";
						that.faceshow = false
					}
				}
			},
			sendimg: function() {
				var that = this;
				app.chooseImage(function(data) {
					for (var i = 0; i < data.length; i++) {
						var message = data[i];
						var msgdata = {
							aid: app.globalData.aid,
							mid: app.globalData.mid,
							bid: that.bid,
							msgtype: 'image',
							content: message,
							platform: app.globalData.platform,
							pre_url: app.globalData.pre_url
						};
						app.sendSocketMessage({
							type: 'tokefu',
							data: msgdata
						});
					}
				}, 3);
			},
			receiveMessage: function(data) {
				var that = this;
				console.log('zz-**')
				console.log(data)
				if ((data.type == 'tokehu' || data.type == 'tokefu') && that.bid == data.data.bid) {
					var message = data.data
					message.content = that.transformMsgHtml(message.msgtype, message.content);
					that.datalist = that.datalist.concat([message]);
					//that.sss = Math.random();
					console.log('11-----------')
					setTimeout(that.updateMessageTime, 100);
					this.scrollToBottom();
					return true;
					if (that.bid != message.bid) { //其他商家发来的信息
						var content = message.content;
						if (message.msgtype == 'image') {
							content = '[图片]';
						} else if (message.msgtype == 'voice') {
							content = '[语音]';
						} else if (message.msgtype == 'video') {
							content = '[小视频]';
						} else if (message.msgtype == 'music') {
							content = '[音乐]';
						} else if (message.msgtype == 'news') {
							content = '[图文]';
						} else if (message.msgtype == 'link') {
							content = '[链接]';
						} else if (message.msgtype == 'miniprogrampage') {
							content = '[小程序]';
						} else if (message.msgtype == 'location') {
							content = '[地理位置]';
						}
						message.content = content;
						that.msgtipsShow = 1;
						that.msgtips = message;
						setTimeout(function() {
							that.msgtipsShow = 2;
						}, 10000);
					}
				}
				return false;
			},
			toggleFaceBox: function() {
				this.faceshow = !this.faceshow
			},
			scrollToBottom: function() {
				var that = this;
				setTimeout(function() {
					uni.pageScrollTo({
						scrollTop: 10000,
						duration: 0
					});
				}, 300);
			},
			onInputFocus: function(e) {
				this.faceshow = false
			},
			onPageScroll: function(e) {
				var that = this;
				var scrollY = e.scrollTop;
				if (scrollY == 0 && !that.nomore) {
					this.getdatalist();
				}
			},
			messageChange: function(e) {
				this.message = e.detail.value;
				this.trimMessage = e.detail.value.trim();
			},
			transformMsgHtml: function(msgtype, content) {
				if (msgtype == 'miniprogrampage') {
					var contentdata = JSON.parse(content);
					content = '<div style="font-size:16px;font-weight:bold;height:25px;line-height:25px">' +
						contentdata.Title + '</div><img src="' + contentdata.ThumbUrl + '" style="width:400rpx"/>';
				}
				if (msgtype == 'image') {
					content = '<img src="' + content + '" style="width:400rpx"/>';
				}
				return content;
			},
			selectface: function(face) {
				this.message = "" + this.message + face;
				this.trimMessage = this.message.trim();
			},
			getTime: function(createtime) {
				var t = this.nowtime - createtime;
				if (t > 0) {
					var todaystart = new Date(this.dateFormat(this.nowtime, "Y-m-d 00:00:00")).getTime();
					todaystart = todaystart / 1000;
					var lastdaystart = todaystart - 86400;
					if (t <= 180) {
						return '刚刚';
					}
					if (createtime > todaystart) {
						return this.dateFormat(createtime, "H:i");
					}
					if (createtime > lastdaystart) {
						return '昨天' + this.dateFormat(createtime, "H:i");
					}
					return this.dateFormat(createtime, 'Y年m月d日 H:i:s');
				}
			}
		}
	};
</script>
<style>
	.container {
		display: block;
		min-height: 100%;
		width: 100%;
		float: left;
		box-sizing: border-box;
		background: #f4f4f4;
		color: #222;
	}

	.message-list {
		height: calc(100vh - 150rpx);
		padding-left: 25rpx;
		padding-right: 25rpx;

	}

	.message-item {
		display: flex;
		padding: 20rpx 0
	}

	.message-time {
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
		text-align: center;
		display: inline-block;
		color: #999;
		font-size: 24rpx;
	}

	.message-avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}

	.message-text {
		max-width: 525rpx;
		min-height: 64rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		padding: 20rpx 30rpx;
		word-break: break-all
	}

	.message-text-left {
		position: relative;
		background-color: #fff;
		margin-left: 20rpx;
		border-radius: 12rpx;
		border: 1rpx solid #dddddd;
	}

	.message-text-right {
		position: relative;
		background-color: #9AE966;
		margin-right: 20rpx;
		border-radius: 12rpx;
		border: 1rpx solid #6DBF58;
	}

	.arrow-box {
		position: absolute;
		width: 16rpx;
		height: 24rpx;
		top: 35rpx;
	}

	.arrow-left {
		left: -14rpx;
	}

	.arrow-right {
		right: -14rpx;
	}

	.arrow-icon {
		display: block;
		width: 100%;
		height: 100%;
	}

	.input-box {
		position: fixed;
		z-index: 100;
		bottom: 0;
		width: 96%;
		min-height: 100rpx;
		padding: 15rpx 2% 35rpx 2%;
		background-color: #fff;
		box-sizing: content-box;
	}

	.input-form {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.input {
		flex: 1;
		height: 66rpx;
		border: 1rpx solid #ddd;
		padding: 5rpx 10rpx;
		background-color: #fff;
		font-size: 30rpx;
		border-radius: 12rpx;
	}

	.textarea {
		flex: 1;
		border: 1rpx solid #ddd;
		padding: 15rpx 10rpx;
		background-color: #fff;
		font-size: 30rpx;
		border-radius: 12rpx;
		height: 65rpx;
		box-sizing: border-box !important;
		display: block !important;
	}

	.pic-icon {
		width: 54rpx;
		height: 54rpx;
		margin-right: 18rpx;
	}

	.face-icon {
		width: 60rpx;
		height: 60rpx;
		margin-left: 18rpx;
	}

	.faces-box {
		width: 100%;
		height: 500rpx;
	}

	.single-face {
		width: 48rpx;
		height: 48rpx;
		margin: 10rpx;
	}

	.send-button {
		width: 100rpx;
		height: 62rpx;
		margin-left: 18rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 62rpx;
		font-size: 28rpx;
		border: 1rpx solid #dddddd;
		color: #fff;
	}

	.send-button-active {
		width: 100rpx;
		height: 62rpx;
		margin-left: 20rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 62rpx;
		font-size: 28rpx;
		border: 1rpx solid #dddddd;
		color: #fff;
	}

	.send-icon {
		width: 56rpx;
		height: 56rpx;
	}

	.anit {
		width: 100%;
		height: 70rpx;
		background: #555;
		position: absolute;
		color: #fff;
		font-size: 30rpx;
		line-height: 70rpx;
		top: -70rpx;
		text-align: left;
		padding: 0 20rpx;
		overflow: hidden
	}

	.show {
		top: 0rpx;
		animation: show 0.2s;
		animation-timing-function: ease;
	}

	@keyframes show {
		from {
			top: -70rpx;
		}

		to {
			top: 0rpx;
		}
	}

	.hide {
		top: -70rpx;
		animation: hide 0.2s;
		animation-timing-function: ease;
	}

	@keyframes hide {
		from {
			top: 0rpx;
		}

		to {
			top: -70rpx;
		}
	}
</style>